import Dialog from "@mui/material/Dialog";
import "./index.scss";

export interface SimpleDialogProps {
  open: boolean;
  selectedValue: string;
  onClose: (value: string) => void;
}

const list: any = [];

for (let i = 0; i < 40; i++) {
  list.push({ id: i + 1 });
}

const CreatedRoom = (props: any) => {
  const { onClose, selectedValue, open } = props;

  const handleClose = () => {
    onClose(selectedValue);
  };

  return (
    <Dialog maxWidth="xs" onClose={handleClose} open={open}>
      <div className="created-room-dialog">
        <div className="title-box">
          <span className="name">创建房间</span>
          <div className="close-btn" onClick={handleClose}>
            <img src="/images/close_x.png" />
          </div>
        </div>
        <div className="form-box">
          <div className="form-class" >
            {/* 房间名称 */}
            <div className="form-item">
              <div className="form-item-label">
                <label htmlFor="">房间名称</label>
              </div>
              <div className="form-item-content">
                <input
                  className="input-text"
                  type="text"
                  placeholder="请输入房间名称"
                />
              </div>
            </div>
            {/* 赛场类型 */}
            <div className="form-item">
              <div className="form-item-label">
                <label htmlFor="">赛场类型</label>
              </div>
              <div className="form-item-content">
                <select className="select-box" id="selectType">
                  <option value="1">钻石赛场</option>
                  <option value="2">TON赛场</option>
                </select>
              </div>
            </div>
            {/* PK金额 */}
            <div className="form-item">
              <div className="form-item-label">
                <label htmlFor="">PK金额</label>
              </div>
              <div className="form-item-content">
                <input
                  className="input-text"
                  type="text"
                  placeholder="请输入PK金额"
                />
              </div>
            </div>
            {/* 备注提示 */}
            <div className="form-item">
              <div className="form-item-label">
                <label htmlFor="">备注提示</label>
              </div>
              <div className="form-item-content">
                <textarea
                  className="textarea-class"
                  rows={8}
                  name=""
                  id=""
                ></textarea>
              </div>
            </div>
            <div className="form-btns">
              <button className="btn-submit" onClick={handleClose}>
                立即创建
              </button>
            </div>
          </div>
        </div>
      </div>
    </Dialog>
  );
};
export default CreatedRoom;
